<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
function showLoader(loader_title,details){
	if(loader_title == null){loader_title = "Laden..";}
	$('#page-loader-title').html(loader_title);
	$('#page-loader').show();
	$('#page-loader-background').show();
	$('#page-loader-detail-text').html(details + '<br>');
}

function hideLoader(){
	$('#page-loader').hide();
	$('#page-loader-background').hide();
}
function addLoadDetails(details){
	$('#page-loader-detail-text').append(details);
}
</script>
<style>
#page-loader {
  position: absolute;
  top: 50%;
  /*bottom: 50%;*/
  left: 50%;
  /*right: 50%;*/
  background-color: #000;
  background-image: url('./spinner_circle.gif');
  background-repeat: no-repeat; 
  background-position: 50% 50%;
  color: #FFF;
  z-index: 9999;
  display: none;
  text-align: center;
  width: 200px;
  height: 90px;
  margin-top: -75px; /* Half the height */
  margin-left: -45px; /* Half the width */
  padding-top: 25px;
  line-height: 6pt;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

#page-loader-detail{
	position: relative;
	top: 150px;
	/*bottom: 50%;*/
	left: -100px;
	/*right: 50%;*/
	background-color: #000;
	color: #FFF;
	z-index: 9999;
	display: none;
	text-align: center;
	width: 500px;
	height: 150px;
	margin-top: -75px; /* Half the height */
	margin-left: -45px; /* Half the width */
	padding-top: 5px;
	line-height: 6pt;
	opacity:0.8;
	filter:alpha(opacity=80);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
    overflow: none;	
	
}
#page-loader-detail H1{
	font-size: 16px;
	font-weight: bold;
	text-decoration:underline;
}
#page-loader-detail-text{
	width: 490px;
	height: 100px;
	background-color: #000;
	color: #FFF;
	line-height: 17px;
    overflow: auto;
}
#page-loader h3{
	position: relative;
	text-align: center;
	top: 60px;
	
}
#page-loader-info {
	z-index: 10000;
	width:22px;
	height:23px;
	
	position:absolute;
	top:90px;
	right:1px;
	background-image: url('./icon-info.png');
	background-repeat: no-repeat; 
}
#page-loader-background {
  position: absolute;
  top: 0;
  bottom: 0%;
  left: 0;
  right: 0%;
  background-color: white;
  z-index: 9998;
  display: none;
  text-align: center;
  width: 100%;
  padding-top: 25px;
  opacity:0.6;
  filter:alpha(opacity=60);
}
</style>
<!---PageLOADER-->
<div id="page-loader-background"></div>
<div id="page-loader"><a href="javascript:void('0');" id="page-loader-info" title="Laat zien wat er presies gebeurd"  onclick="$('#page-loader-detail').fadeToggle(300);"></a><h3 id="page-loader-title">Opslaan</h3><div id="page-loader-detail"><h1>Details</h1><p id="page-loader-detail-text"></p></p></div>
<!--END PageLOADER-->

<a href="#" onclick="showLoader('Even geduld..','dit is de demo van het load scherm');">Opslaan</a>